import React, { useRef, useState, useEffect } from 'react';
import { connect } from 'umi';
import { Radio, Row, Col, Card, Space } from 'antd';
import { operation_statusinfo, pay_type } from '@/common/contact'
import TableDataBlock from '@/components/TableDataBlock';
import PopImgShow from '@/components/PopImgShow';
import Detail from './components/detail'
import { useUpdateEffect } from 'ahooks';
import Indentation from '@/components/Indentation'
const OrderList = (props) => {
  const { loading, dispatch, list, history, departmentList, teamList } =
    props;
  const { location } = history;
  const { query } = location;
  const { accessId } = query
  const childRef = useRef();
  const [visible, setVisible] = useState(false);
  const [active, setActive] = useState('')

  const handleCallback = () => {
    childRef.current.fetchGetData();
  };
  useUpdateEffect(() => {
    handleCallback()
  }, [active])
  const onChange = (e) => {
    setActive(e.target.value);
  };
  const searchItems = [
    {
      label: '订单编号',
      name: 'orderSn',
    },
    {
      label: '用户姓名或手机',
      name: 'keyword',
    },
    {
      label: '创建时间',
      type: 'rangePicker',
      name: 'createStartTime',
      end: 'createEndTime',
    },
  ];
  const getColumns = [
    {
      title: '订单编号',
      dataIndex: 'orderSn',
    },
    {
      title: '姓名',
      dataIndex: 'username',
    },
    {
      title: '商品名称',
      dataIndex: 'orderDesc',
      render: (e) => {
        const goods = e ? JSON.parse(e) : {}
        const { goodsCover, goodsName } = goods
        return <Indentation str={goodsName}></Indentation>
      }
    },
    // {
    //   title: '订单类型',
    //   dataIndex: 'orderType',
    //   render: (e) => {
    //     return goodsType_status[e]
    //   },
    // },
    {
      title: '应收',
      dataIndex: 'orderFee',
    },
    {
      title: '欠费',
      dataIndex: 'remainMoney',
    },
    {
      title: '补费金额',
      dataIndex: 'payFee',
    },

    {
      title: '实收',
      dataIndex: 'realPayFee',
    },
    {
      title: '支付类型',
      dataIndex: 'payType',
      render: (e) => {
        return pay_type[e]
      }
    },
    {
      title: '支付时间',
      dataIndex: 'payTime',
    },
    {
      title: '订单备注',
      dataIndex: 'remark',
    },

    // {
    //   title: '应收',
    //   dataIndex: 'orderFee',
    // },

    {
      title: '创建人',
      dataIndex: 'addAdminName',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: (e) => {
        return operation_statusinfo[e]
      },
    },
    {
      type: 'handle',
      width: 200,
      dataIndex: 'id',
      render: (val, record) => [
        {
          title: '审核',
          click: () => {
            history.push({
              pathname: '/order/orderDetails',
              query: {
                orderSn: record.orderSn,
                accessId,
                linkType: 'ToRecharge',
                rechargeId: val
              }
            })
          },
        },
      ],
    },
  ];
  const TabList = [{
    label: '全部',
    key: '',
  },
  {
    label: '待支付',
    key: '0',
  },
  {
    label: '已支付',
    key: '1',
  },
  {
    label: '已关闭',
    key: '2',
  },
  ]
  return (
    <Card title='审核补费'>
      <Row gutter={[0, 12]}>
        <Col span={24}>
          <TableDataBlock
            params={{ status: active }}
            cRef={childRef}
            loading={loading}
            searchItems={searchItems}
            columns={getColumns}
            rowKey={(record) => `${record.id}`}
            dispatchType="order/fetchSearchToCheckRecharge"
            {...list}
          ></TableDataBlock>
        </Col>
        <Detail handleCallback={handleCallback} visible={visible} onClose={() => setVisible(false)}></Detail>
      </Row>
    </Card>


  );
};

export default connect(({ order, loading }) => ({
  list: order.orderRechargeList,
  loading: loading.models.order,
}))(OrderList);
